id<template>
  <view class="refund-detail">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="header-title">{{refundInfo.refund_status_name}}</text>
    </view>
    
    <!-- 商品信息 -->
    <view class="goods-section">
      <view class="goods-info">
        <image class="goods-image" :src="$util.img(refundInfo.sku_image)" mode="aspectFill"></image>
        <view class="goods-details">
          <text class="goods-name">{{ refundInfo.sku_name }}</text>
          <view class="goods-price-row">
            <text class="goods-price">¥{{ refundInfo.price }}</text>
            <text class="goods-quantity">x{{ refundInfo.num }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="info-section">
      <view class="section-title">
        <text>订单信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单编号：</text>
        <text class="info-value">{{ orderInfo.order_no }}</text>
        <text class="copy-btn" @tap="copyOrderNo">复制</text>
      </view>
      <view class="info-item">
        <text class="info-label">买家名称：</text>
        <text class="info-value">{{ orderInfo.name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系电话：</text>
        <text class="info-value">{{ orderInfo.mobile }}</text>
      </view>
	  <view class="info-item">
	    <text class="info-label">收货地址：</text>
	    <text class="info-value">{{ orderInfo.full_address }}</text>
	  </view>
    </view>
    
    <!-- 售后信息 -->
    <view class="info-section">
      <view class="section-title">
        <text>售后信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">退款方式：</text>
        <text class="info-value refund-method">{{ refundInfo.refund_type_name }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">申请金额：</text>
        <text class="info-value refund-amount">¥{{ refundInfo.refund_apply_money }}</text>
      </view>
      <view class="info-item" v-if="refundInfo.refund_reason">
        <text class="info-label">申请原因：</text>
        <text class="info-value">{{ refundInfo.refund_reason }}</text>
      </view>
      <view class="info-item" v-if="refundInfo.refund_remark">
        <text class="info-label">申请说明：</text>
        <text class="info-value">{{ refundInfo.refund_remark }}</text>
      </view>
    </view>
    
    
    <!-- 金额信息 -->
    <view class="info-section">
      <view class="section-title">
        <text>金额信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品金额：</text>
        <text class="info-value">¥{{ refundInfo.goods_money }}</text>
      </view>
    </view>
    
    <!-- 售后日志 -->
    <view class="info-section">
      <view class="section-title">
        <text class="log-title">售后日志</text>
      </view>
      <view class="log-list">
        <view class="log-item" v-for="(log, index) in refundInfo.refund_log_list" :key="index">
         
          <view class="log-content">
            <text class="log-action">{{ log.username }}：{{ log.action }}</text>
            <text class="log-time">{{ $util.timeStampTurnTime(log.action_time) }}</text>
          </view>
        </view>
      </view>
    </view>
	<view style="height: 50rpx;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsInfo: {
          image: 'https://img.alicdn.com/imgextra/i1/O1CN015oY0YV1rFk93M36H0_!!6000000005268-0-picassoopen.jpg',
          name: '毛绒玩具可爱萌宠羊驼公仔儿童玩具',
          price: '56.95',
          quantity: 1
        },
        orderInfo: {
          type: '普通订单',
          orderNo: '2023031513937001',
          buyerName: 'lijiang',
          paymentMethod: '余额支付',
          deliveryMethod: '物流配送',
          phone: '18116673086',
          totalAmount: '56.95',
          actualAmount: '36.95'
        },
        refundInfo: {
          type: '退款',
          method: '仅退款',
          amount: '36.95',
          reason: '商家对订单进行了主动退款',
          description: '商家对订单进行了主动退款'
        },
        // 售后日志记录
        refundLogs: [
          {
            type: '商家',
            action: '卖家确认退款',
            time: '2023-03-16 16:11:03'
          },
          {
            type: '商家',
            action: '商家主动退款',
            time: '2023-03-16 16:10:33'
          }
        ]
      }
    },
	onLoad(options) {
		this.init(options.id);
	},
    methods: {
		init(id){
			this.$api.sendRequest({
				url: '/api/admin/detail',
				data: {
					order_goods_id: id
				},
				success: res => {
					if (res.code >= 0) {
						this.orderInfo = res.data.order_info;
						this.refundInfo = res.data.detail;
					}
				}
			});
		},
      copyOrderNo() {
        // 复制订单号到剪贴板
        try {
          uni.setClipboardData({
            data: this.orderInfo.orderNo,
            success: () => {
              uni.showToast({
                title: '复制成功',
                icon: 'success'
              })
            }
          })
        } catch (e) {
          console.error('复制失败:', e)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .refund-detail {
    background-color: #f8f8f8;
    min-height: 100vh;
  }
  
  .header {
    background-color: #ff6600;
    padding: 30rpx;
    text-align: center;
  }
  
  .header-title {
    color: #ffffff;
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .goods-section {
    background-color: #ffffff;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .goods-info {
    display: flex;
  }
  
  .goods-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 10rpx;
    margin-right: 30rpx;
  }
  
  .goods-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .goods-name {
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    margin-bottom: 10rpx;
  }
  
  .goods-type {
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 10rpx;
  }
  
  .goods-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .goods-price {
    font-size: 32rpx;
    color: #ff6600;
    font-weight: bold;
  }
  
  .goods-quantity {
    font-size: 28rpx;
    color: #999999;
  }
  
  .info-section {
    background-color: #ffffff;
    margin-bottom: 20rpx;
  }
  
  .section-title {
    padding: 25rpx 30rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  
  .section-title text {
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    padding: 25rpx 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }
  
  .info-item:last-child,
  .last-item {
    border-bottom: none;
  }
  
  .actual-amount {
    color: #ff6600;
    font-weight: bold;
  }
  
  .log-title {
    color: #ff6600;
  }
  
  .log-list {
    padding: 20rpx 30rpx;
  }
  
  .log-item {
    display: flex;
    margin-bottom: 30rpx;
  }
  
  .log-item:last-child {
    margin-bottom: 0;
  }
  
  .log-icon-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20rpx;
  }
  
  .log-icon {
    width: 50rpx;
    height: 50rpx;
    background-color: #ff6600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  
  .log-icon-text {
    color: #ffffff;
    font-size: 20rpx;
    font-weight: bold;
  }
  
  .log-line {
    width: 2rpx;
    background-color: #eeeeee;
    flex: 1;
    margin-top: 10rpx;
  }
  
  .log-content {
    flex: 1;
    padding-top: 8rpx;
  }
  
  .log-action {
    display: block;
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 5rpx;
  }
  
  .log-time {
    display: block;
    font-size: 24rpx;
    color: #999999;
  }
  
  .info-label {
    font-size: 28rpx;
    color: #666666;
    min-width: 160rpx;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333333;
    flex: 1;
  }
  
  .copy-btn {
    font-size: 28rpx;
    color: #ff6600;
    padding: 5rpx 20rpx;
    border: 1rpx solid #ff6600;
    border-radius: 20rpx;
  }
  
  .refund-type,
  .refund-method,
  .refund-amount {
    color: #ff6600;
  }
  
  .remark-section {
    padding: 30rpx;
  }
  
  .remark-content {
    font-size: 28rpx;
    color: #666666;
    line-height: 44rpx;
  }
</style>